<!DOCTYPE html>
<html>
<head>
    <title>活动签到页 {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}"/>
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@mobile_head"/>
    <hook name="before_head_end"/>
    <style type="text/css">
    	html,body{width:100%;height: 100%;}
    	.btn-box{}
    	.btn-signoff,.btn-signin{background: #2175cd;}
    	.btn-box{padding:1rem;display:flex;justify-content:center}
    </style>
 </head>
<body class="page-activity-signin">
<div id="container">
	

</div>
<div class="pannel-box shadow-box-0">
	<div class="pos-box">
		<input class="current" placeholder="请允许获取地理位置以便获取您的位置..." readonly>
		<select class="slt-option">
			<option>正在获取您参加的志愿活动...</option>
		</select>
		<div class="btn-box">
			<a href="javascript:;" class="layui-btn btn-signin">点击签到</a>
			<a href="javascript:;" class="layui-btn btn-signoff">点击签退</a>
		</div>
	</div>
</div>
<include file="public@mobile_footer">
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=WQCBZ-FLQCJ-ZKFF5-KTONH-GYQWV-D4BR4"></script>
<script type="text/javascript">
(function($){
	"use strict";
		var _map,_center,_center_lat,_center_lng,_activities=[];
		function init_map(){			
			_map = new qq.maps.Map(document.getElementById("container"), {
			    center: _center,
			    zoom: 15,
			});
		}
		function ajax_get_personal_info(){
			$.ajax({
				url:'{:url("ajax_get_current_activity")}',
				method:'POST',
				dataType:'json',
				success:function(rsp){
					if(rsp.error){
						return layui.use('layer',function(){
							layui.layer.msg(rsp.errmsg);
						});
					}
					$('.slt-option').empty();
					for(var i=0;i<rsp.data.length;i++){
						_activities.push(rsp.data[i]);
						deploy_on_map(rsp.data[i]);
						insert_option(rsp.data[i]);
					}
				}
			});
		}
		function insert_option(_activity){
			var _html= '<option data-id="'+_activity.act_id+'">'+_activity.title+'</option>';
			$('.slt-option').append(_html);
		}
		function deploy_on_map(_activity){
			var _location = _activity.point;
			var _place = _activity.place;
			for(var j = 0; j<_location.length;j++){
				var _lng_lat_info = _location[j].split(','); 
				var _lng = _lng_lat_info[1],_lat =_lng_lat_info[0];
				deploy_circle(_lat,_lng,200);
				deploy_marker(_lat,_lng,_place[j]);
			}
			
		}
		function deploy_marker(_lat,_lng,_text){
			var _point = new qq.maps.LatLng(_lat,_lng);
			var marker = new qq.maps.Marker({
			    position:_point,
			    map: _map
			});
			var infoWin = new qq.maps.InfoWindow({
			    map: _map
			});			 
			infoWin.setContent('<div style="width:200px;padding-top:10px;">'+_text+'</div>');
			infoWin.setPosition(_point);
			qq.maps.event.addListener(marker,'click',function() {
		    	infoWin.open();
		    });
        }
		function deploy_circle(_lat,_lng,_r){
			 var circle=new qq.maps.Circle({
		        map:_map,
		        center:new qq.maps.LatLng(_lat,_lng),
		        radius:_r,
		        strokeWeight:1
		    });
		}
		function get_location(){
			wx.getLocation({
			 type: 'gcj02',
			 success (res) {
			   _center_lat = res.latitude;
			   _center_lng = res.longitude;
			   _center =  new qq.maps.LatLng(_center_lat,_center_lng);
			   init_map();
			   add_marker();
			   geocoder_map();
			   ajax_get_personal_info();
			   bind_events();
			 }
			});
		}
		function add_marker(){
			var _marker = new qq.maps.Marker({
				position:_center,				
				map:_map
			});
			var markerIcon = new qq.maps.MarkerImage(
                         "__TMPL__/public/assets/img/vol_person_icon.png?v=1",
                         qq.maps.Size(42, 42),
                         new qq.maps.Point(0, 0),
                         qq.maps.Point(21, 42)
            );
            _marker.setIcon(markerIcon);
		}
		function geocoder_map(){
			var geocoder = new qq.maps.Geocoder({
			    complete:function(result){
			        $('.current').val(result.detail.address);
			    }
			});
			geocoder.getAddress(_center);
		}
		function ajax_act_sign(_act){
			var _current_id = $('.slt-option option:selected').data('id');			
			$.ajax({
				url:'{:url("ajax_act_sign")}',
				method:'POST',
				data:{
					act:_act,
					location:{
						lat:_center_lat,
						lng:_center_lng
					},
					act_id:_current_id
				},
				dataType:'json',
				success:function(rsp){
					layui.use('layer',function(){
							layui.layer.msg(rsp.errmsg);
						});
					if(rsp.error) return;
				}
			});
		}

		function bind_events(){
			$('.btn-signoff').off("click").on("click",function(e){
				e.preventDefault();
				ajax_act_sign(2);
			});
			$('.btn-signin').off("click").on("click",function(e){
				e.preventDefault();
				ajax_act_sign(1);
			});
		}
		function wx_config(){
			wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
				wx.updateAppMessageShareData({
				    title: '日照市交警志愿者微官网', // 分享标题
				    desc: '日照市交警志愿者服务网微信端', // 分享描述
				    link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				    imgUrl: 'http://rzjj.coolaring.com/themes/rzjj/public/assets/img/jinghui.png', // 分享图标
				    success: function () {
				      // 设置成功
				    }
				  });
				get_location();
			});
		}


    $(function(){
    	 wx_config();
    })

      

})(jQuery)

</script>
</body>
</html>